<template>
  <div class="banner">
    <Swiper slides-per-group-auto slides-per-view="auto" :navigation="true" :grab-cursor="true">
      <SwiperSlide v-for="item in banners" :key="item.bannerId">
        <img :src="item.imageUrl" class="banner-image" />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { ref, onMounted } from "vue"
import { GetBannerInfo } from "@/api/api.ts"
import type { BannerArray } from "@/models/discover"
const banners = ref<BannerArray>([])
onMounted(() => {
  getBanner()
})
const getBanner = async () => {
  await GetBannerInfo().then(res => {
    banners.value = res.data.banners
  })
}

</script>
<style lang="scss" scoped>
.swiper {
  .swiper-slide {
    @apply w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4 px-2.5;
  }
}

.img {
  @apply rounded-lg cursor-pointer transition-all object-cover;
  @apply hover:shadow hover:opacity-80;
}
</style>
